<template>
  <!-- 员工 -->
  <div>
    <div class="employees-container">
      <div class="app-container">
        <page-tools>
          <template #left>
            <span>共{{ total }}条数据 </span>
          </template>
          <template #right>
            <el-button type="primary" size="small" @click="exportExcel">
              excal导出
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="$router.push('/import?type=batchuser')"
            >
              excal导入
            </el-button>
            <el-button type="primary" size="small" @click="addemployeeFn">
              新增员工
            </el-button>
          </template>
        </page-tools>
        <!-- 员工列表 -->
        <el-card v-loading="loading" style="margin-top: 10px">
          <el-table :data="list" border>
            <el-table-column
              type="index"
              :index="indexFn"
              prop=""
              label="序号"
              sortable=""
            />
            <el-table-column prop="username" label="姓名" sortable="" />
            <el-table-column prop="username" label="头像" sortable="">
              <template #default="{ row }">
                <!-- staffPhoto 压根就没有(没有这个字段或者这个字段返回了空字符串)
                staffPhoto有数据，只是链接是错误的
                 -->
                <img
                  v-imgerror="defaultUrl"
                  class="one"
                  :src="row.staffPhoto || defaultUrl"
                  alt=""
                  @click="seeQrcode(row.staffPhoto)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" sortable="" />
            <el-table-column prop="workNumber" label="工号" sortable="" />
            <el-table-column
              prop="formOfEmployment"
              label="聘用形式"
              :formatter="formatterFn"
              sortable=""
            />
            <el-table-column prop="departmentName" label="部门" sortable="" />
            <el-table-column prop="timeOfEntry" label="入职时间" sortable="">
              <template #default="{ row }">
                {{ row.timeOfEntry | formatterTime('YYYY-MM-DD') }}
              </template>
            </el-table-column>
            <el-table-column label="操作" sortable="" fixed="right" width="280">
              <template #default="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push(`/employees/detail/${row.id}`)"
                >
                  查看
                </el-button>
                <el-button type="text" size="small">转正</el-button>
                <el-button type="text" size="small">调岗</el-button>
                <el-button type="text" size="small">离职</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="clickShowRole(row.id)"
                >
                  角色
                </el-button>
                <el-button
                  type="text"
                  :disabled="!btnRole('DELssss')"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <div style="height: 60px; margin-top: 10px">
            <!--
                current-page 当前页
                page-sizes 可供选择的每页条数
                page-sizes 每页显示条目个数
                layout 布局控件，决定了显示多少个控件
                total 总条目数
                @size-change 每页条数变化了，切换了每页的条数
                @current-change 当前页变化，改变当前页触发执行
              -->
            <el-pagination
              :current-page="page"
              :page-sizes="[1, 3, 5, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
        <addEmployeeVue :show-dialog.sync="showDialog" />
        <el-dialog
          title="展示二维码"
          :visible="showQrcodeDialog"
          @close="showQrcodeDialog = false"
        >
          <div style="text-align: center">
            <canvas ref="canvas" />
          </div>
        </el-dialog>
        <!-- 分配角色弹层 -->
        <assignRoleVue
          :user-id="userId"
          :show-role-dialog.sync="showRoleDialog"
        />
      </div>
    </div>
  </div>
</template>
<script>
// import { getUserListApi } from '@/api/company'
import { getUserListApi } from '@/api/employess'
import { formatterTime } from '@/filter'
import obj from '@/constant/employees'
import addEmployeeVue from './components/add-employee.vue'
import defaultUrl from '@/assets/common/bigUserHeader.png'
import Qrcode from 'qrcode'
import assignRoleVue from './components/assign-role.vue'
import btnrole from '@/mixin/btnrole'
export default {
  components: {
    addEmployeeVue,
    assignRoleVue
  },

  data() {
    return {
      list: [], // 员工列表
      total: 0, // 数据总数
      page: 1,
      pageSize: 5,
      loading: false,
      showDialog: false, // 弹出框状态
      defaultUrl: defaultUrl,
      showQrcodeDialog: false, // 二维码弹层
      userId: '', // 员工id
      showRoleDialog: false
    }
  },
  mixins: [btnrole],
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      this.loading = true
      const { data } = await getUserListApi(this.page, this.pageSize)
      // console.log(data)
      this.list = data.rows
      this.total = data.total
      this.loading = false
    },
    indexFn(index) {
      return index + 1 + (this.page - 1) * this.pageSize
    },
    // 每页条数变化了，切换了每页的条数
    handleSizeChange(val) {
      // 每次切换了跳到第一页
      this.page = 1
      this.pageSize = val
      this.getUserList()
      // console.log(`每页 ${val} 条`)
    },
    // 当前页变化，改变当前页触发执行
    handleCurrentChange(val) {
      this.page = val
      this.getUserList()
      // console.log(`当前页: ${val}`)
    },
    // 用来格式化列的内容
    // 通过return 返回处理好的数据
    formatterFn(row, column, cellValue, index) {
      // 高档写法
      const { hireType } = obj
      const result = hireType.find((item) => item.id === +cellValue)
      return result ? result.value : '未知'
      // row:一行的数据
      // column： 列的各种信息
      // cellValue ：当前列的值
      // index 索引

      // console.log(row, column, cellValue, index)
      // 原始人写法
      // if (cellValue === 1 || cellValue === '1') {
      //   return '正式'
      // } else if (cellValue === 2 || cellValue === '2') {
      //   return '非正式'
      // }
      // return cellValue
    },
    // 打开弹层
    addemployeeFn() {
      this.showDialog = true
    },

    // 点击头像生成二维码
    seeQrcode(url) {
      this.showQrcodeDialog = true
      // var canvas = document.getElementById('canvas')
      this.$nextTick(() => {
        const canvas = this.$refs.canvas
        // 参数一： 指定二维码渲染的元素
        // 参数2： 指定要转换成二维码的内容
        // 参数3： 二维码转换成功或失败的回调函数
        Qrcode.toCanvas(canvas, url, function (error) {
          if (error) console.error(error)
          console.log('success')
        })
      })
    },

    async exportExcel() {
      // 请求数据总数
      const {
        data: { rows }
      } = await getUserListApi(1, this.total)
      console.log(rows)
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then((excel) => {
        // 表头
        const tHeader = [
          '姓名',
          '手机号',
          '入职时间',
          '聘用形式',
          '转正日期',
          '工号',
          '部门'
        ]
        const headersRelations = {
          姓名: 'username',
          手机号: 'mobile',
          入职时间: 'timeOfEntry',
          聘用形式: 'formOfEmployment',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          部门: 'departmentName'
        }
        // 多表头
        const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
        // 合并单元格
        const merges = ['A1:A2', 'B1:F1', 'G1:G2']
        const data = this.formatJson(rows, tHeader, headersRelations)
        excel.export_json_to_excel({
          header: tHeader, // 表头
          data, // 二维数组
          filename: '员工统计表', // 导出的文件名
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx', // 导出的文件类型
          multiHeader: multiHeader, // 配置多表头
          merges: merges // 合并单元格
        })
        this.downloadLoading = false
      })
    },
    formatJson(rows, tHeader, headersRelations) {
      // 分析1：数组的数量，来自rows
      // rows: 数组的长度（决定了Excel有多少行数据）
      // 分析2：有多少列，根据表头来决定
      // tHeader:决定了每行有几列
      const arr = []
      rows.forEach((item) => {
        // 每一行的数据
        const itemarr = []
        tHeader.forEach((it) => {
          // it：每一列的键
          const englishKey = headersRelations[it]
          let val = item[englishKey]
          // 对聘用形式数据进行加工
          if (englishKey === 'formOfEmployment') {
            const { hireType } = obj
            const result = hireType.find((item) => item.id === +val)
            val = result ? result.value : '未知'
          }
          // 对时间进行加工，****年**月**日
          // if (englishKey === 'timeOfEntry' || englishKey === 'correctionTime') {
          //   val = formatterTime(val, 'YYYY年MM月DD日')
          // }
          // 升级写法：
          if (['timeOfEntry', 'correctionTime'].includes(englishKey)) {
            val = formatterTime(val, 'YYYY年MM月DD日')
          }
          itemarr.push(val)
        })
        arr.push(itemarr)
      })
      console.log(arr)
      return arr
    },
    // 点击角色打开弹层
    clickShowRole(id) {
      this.userId = id
      this.showRoleDialog = true
    }
    // 删除
    // btnRole(str) {
    //   const roles = this.$store.getters.roles
    //   if (roles) {
    //     return roles.points.includes(str)
    //   } else {
    //     return false
    //   }
    // }
  }
}
</script>
<style scoped>
.one {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
</style>
